<template>
  <div v-loading="loading" class="Fxpg_details" element-loading-background="rgba(0, 0, 0, 0.4)">
    <div class="Fxpg_cur listTablesOther">
      <div class="RightCardTitle ">保护对象风险</div>
      <!-- <el-table
        :data="fxpgList.villagelst"
        style="width: 100%"
        class="tableFXPg"
        @row-click="rowHandleclickBh"
      >
        <el-table-column align="center" :class-name="'tapadlr0'" prop="ewName" width="80" label="名称" />
        <el-table-column align="center" :class-name="'tapadlr0'" prop="townAdnm" width="65" label="所属乡镇" />
        <el-table-column align="center"  width="60" prop="house" label="影响房屋" />
        <el-table-column align="center"   prop="pCount" width="60" label="影响人数" />
        <el-table-column    align="center" :class-name="'tapadlr0'"  min-width="75px" prop="level" label="淹没水深">
          <template slot-scope="scope">
            <span v-show="scope.row.level == '1'" class="warningYy1 wid45">>2m</span>
            <span v-show="scope.row.level == '2'" class="warningYy2 wid45">1-2m</span>
            <span v-show="scope.row.level == '3'" class="warningYy3 wid45">0.5-1m</span>
            <span v-show="scope.row.level == '4'" class="warningYy4 wid45">0-0.5m</span>
          </template>
        </el-table-column>
      </el-table> -->
      <div class="tabel_common tabel_commons">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"> 名称 </div>
              <div class="th"> 所属乡镇 </div>
              <div class="th"> 影响房屋 </div>
              <div class="th"> 影响人数 </div>
              <div class="th"> 淹没水深 </div>
            </div>
          </div>
          <el-scrollbar style="height:18vh; width: 100%;" class="el_scrollbar">
            <div class="tbody">
              <template v-if="!fxpgList.villagelst || fxpgList.villagelst.length <=0 ">
                <div slot="no-results" class="noData" style="background-position: center 54%;padding-top: 32%;">暂无数据</div>
                </template>
              <div  v-if=" fxpgList.villagelst && fxpgList.villagelst.length >0 "  class="tr" v-for="dict in fxpgList.villagelst" :key="dict.ewName" @click="rowHandleclickBh(dict)"
                :class="['tr', PionId == dict.ewCode ? 'ta' : '']">
                <div class="td"> 
                  <el-tooltip class="item" effect="dark" :content="dict.ewName" placement="top-start">
                    <span>{{ dict.ewName }}</span>
                  </el-tooltip>  
                </div>
                <div class="td"> {{ dict.townAdnm }} </div>
                <div class="td"> {{ dict.house }} </div>
                <div class="td"> {{ dict.pCount }} </div>
                <div class="td">
                  <div class="img" v-show="dict.level == '1'">
                    <img src="@/assets/newimg/2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '2'">
                    <img src="@/assets/newimg/1-2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '3'">
                    <img src="@/assets/newimg/0.5-1m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '4'">
                    <img src="@/assets/newimg/0.5m.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>


    <div class="Fxpg_cur listTablesOther">
      <div class="RightCardTitle">基础设施风险</div>
      <!-- <el-table
        :data="fxpgList.infrastructurelst"
        class="tableFXPg"
        style="width: 100%"
        @row-click="rowHandleclickJc"
      >
        <el-table-column align="center" prop="ewName" :class-name="'tapadlr0'" width="80" label="名称" />
        <el-table-column align="center" prop="townAdnm" :class-name="'tapadlr0'"  width="65" label="所属行政单元" />
        <el-table-column align="center" prop="house"  width="60" label="影响房屋" />
        <el-table-column align="center" prop="pCount" width="60" label="影响人数" />
        <el-table-column  min-width="75px" :class-name="'tapadlr0'"  align="center" prop="level" label="淹没水深">
          <template slot-scope="scope">
            <span v-show="scope.row.level == '1'" class="warningYy1 wid45">>2m</span>
            <span v-show="scope.row.level == '2'" class="warningYy2 wid45">1-2m</span>
            <span v-show="scope.row.level == '3'" class="warningYy3 wid45">0.5-1m</span>
            <span v-show="scope.row.level == '4'" class="warningYy4 wid45">0-0.5m</span>
          </template>
        </el-table-column>
      </el-table> -->
      <div class="tabel_common tabel_commons">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"> 名称 </div>
              <div class="th"> 所属乡镇 </div>
              <div class="th"> 影响房屋 </div>
              <div class="th"> 影响人数 </div>
              <div class="th"> 淹没水深 </div>
            </div>
          </div>
          <el-scrollbar style="height:18vh; width: 100%;" class="el_scrollbar">
            <div class="tbody">
              <template v-if="!fxpgList.infrastructurelst || fxpgList.infrastructurelst.length <=0 ">
                <div slot="no-results" class="noData" style="background-position: center 54%;padding-top: 32%;">暂无数据</div>
                </template>
              <div  v-if=" fxpgList.infrastructurelst && fxpgList.infrastructurelst.length >0 "  class="tr" v-for="dict in fxpgList.infrastructurelst" :key="dict.ewName" 
                @click="rowHandleclickBh1(dict)"
                :class="['tr', PionId == dict.ewCode ? 'ta' : '']">
                <div class="td"> 
                  <el-tooltip class="item" effect="dark" :content="dict.ewName" placement="top-start">
                    <span>{{ dict.ewName }}</span>
                  </el-tooltip> 
                </div>
                <div class="td"> {{ dict.townAdnm }} </div>
                <div class="td"> {{ dict.house }} </div>
                <div class="td"> {{ dict.pCount }} </div>
                <div class="td">
                  <div class="img" v-show="dict.level == '1'">
                    <img src="@/assets/newimg/2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '2'">
                    <img src="@/assets/newimg/1-2m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '3'">
                    <img src="@/assets/newimg/0.5-1m.png" alt="" />
                  </div>
                  <div class="img" v-show="dict.level == '4'">
                    <img src="@/assets/newimg/0.5m.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- <div class="Submerge riskInfo"> -->
    <div class=" riskInfo">
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ fxpgList.drownArea || 0 }}</div>
          <div>淹没面积(km²)</div>
        </div>
      </div>
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ fxpgList.sumVillage || 0 }}</div>
          <div>影响村庄(个)</div>
        </div>
      </div>
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ fxpgList.sumHouse || 0 }}</div>
          <div>影响户数(户)</div>
        </div>
      </div>
      <div class="riskInfo_item">
        <div></div>
        <div class="inner">
          <div class="num">{{ fxpgList.sumPCount || 0 }}</div>
          <div>影响人口数(人)</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetRiskDrowning } from '../../../api/xuna.js'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
export default {
  data() {
    return {
      idParams: '',
      fxpgList: {},
      loading: false,
      PionId:undefined,//选中的行
    }
  },
  computed: {
    basin() {
      return this.$store.getters.basin
    },
  },
  mounted() {

  },
  beforeDestroy() {
    this.$eventBus.$off('schemeFxId')
  },
  created() {
    this.$eventBus.$on('schemeFxId', res => {
      this.idParams = res
      this.getSelassessment()
    })
    

  },
  methods: {
    // 保护对象点击行事件
    rowHandleclickBh(row) {
      this.PionId=row.ewCode
      var param = {
        "basin": this.basin,
        "eventName": "RehearsalPosition",  // 事件名称
        "ewCode": row.ewCode    // 预演编号
      }
      callUIInteraction("Web_RehearsalPosition", param);
      const dlgParams = this.$store.getters.dlgParams
      dlgParams.name = 'transferList'
      dlgParams.params = { ID: this.idParams, ewCode: row.ewCode }
      this.$store.dispatch('dlgParams', dlgParams)
      this.$eventBus.$emit('flyToYYFXD', row.ewCode)
    },
    rowHandleclickBh1(row) {
      this.PionId=row.ewCode
      var param = {
        "basin": this.basin,
        "eventName": "RehearsalPosition",  // 事件名称
        "ewCode": row.ewCode    // 预演编号
      }
      callUIInteraction("Web_RehearsalPosition", param);
      this.$eventBus.$emit('flyToYYFXD', row.ewCode)
    },
    // 基础设施点击行事件
    rowHandleclickJc(row) {
      // const dlgParams = this.$store.getters.dlgParams
      // dlgParams.name = 'floodDlog'
      // dlgParams.params = { ID: this.idParams, Guid: row.guid, ewName: row.ewName }
      // this.$store.dispatch('dlgParams', dlgParams)
      this.$eventBus.$emit('flyToYYFXD', row.ewCode)
    },
    getSelassessment() {
      this.loading = true
      GetRiskDrowning({ id: this.idParams }).then((res) => {
        this.loading = false
        if (res.isSuccess && res.data.length > 0) {
          this.fxpgList = res.data[0]
        } else {
          this.fxpgList = []
        }
      })

      console.log('fxpgList111', this.fxpgList.villagelst);
    }
  }
}
</script>
<style lang="less" scoped>
.Fxpg_details {
  display: flex;
  flex-direction: column;
  height: 100%;

  .Fxpg_cur {
    //height: 40%;
    height: 38%;
    flex-shrink: 0;
    background: rgba(3, 34, 55, 0.39);

    .tableFXPg {
      height: calc(100% - 40px);
    }
  }
}

.Submerge {
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  margin-top: 10px;

  >div {
    width: 25%;

    span {
      font-weight: bold;
      font-size: 22px;
      display: block;
      width: 100%;
      height: 80px;
      line-height: 60px;
      text-shadow: 0px 0px 9px rgba(188, 248, 255, 0.79);
      background: url("~@/assets/newimg/StatisticsBg.png") no-repeat top center;
      background-size: 90% 100%;
    }
  }
}

.riskInfo {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #3F72AA;
  padding: 20px 4px 10px;

  .riskInfo_item {
    width: 50%;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFEFE;
  }

  .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    .num {
      font-size: 24px;
      font-family: DIN;
      font-weight: bold;
      color: #00FFFF;
    }
  }

  .riskInfo_item div:nth-child(1) {
    width: 50px;
  }

  .riskInfo_item:nth-child(1) {
    background: url('~@/assets/newimg/4.png') no-repeat;
    background-size: 90%;
  }

  .riskInfo_item:nth-child(2) {
    background: url('~@/assets/newimg/5.png') no-repeat;
    background-size: 90%;
  }

  .riskInfo_item:nth-child(3) {
    background: url('~@/assets/newimg/6.png') no-repeat;
    background-size: 90%;
  }

  .riskInfo_item:nth-child(4) {
    background: url('~@/assets/newimg/7.png') no-repeat;
    background-size: 90%;
  }
}

.helin40 {
  height: 40px;
  line-height: 40px;
  color: #fff;
}

.wid45 {
  width: 50px;
  padding: 0px 3px;
}

.RightCardTitle {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
}

.el-table .el-table__header-wrapper {
  margin-bottom: 5px;
}</style>
